<!DOCTYPE html>  
<meta charset="utf-8" />  
<title>iBoard Test</title>  

<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.4.custom.css" />

<style>
  .area {
    border: 1px solid blue;
  }

  .general {
    padding: 1%; 
  }

  #chatarea {
    width: 25%; 
    float: left;
    margin-right: 1%;
    height: 500px;
  } 
  #canvasarea {
    width: 65%; 
    height: 500px;
    float: left;
  } 

  #output {
    border: 1px solid blue;
    width: 100%;
    overflow: auto;
    height: 380px;
  }

  #msg, #name {
    width: 96%;
  }

  #canvas_id {
    border: 1px solid #ddd;
    cursor: pointer;
  }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript">  

var canvas_ctx = null;


$(function() {
  initCanvas();
})



function initCanvas()
{
    alert(window.innerWidth +", " + window.innerHeight);
}


</script>

<h2>iBoard</h2>  
  <div>
    <div id="chatarea" class="area general">
      <button id='btn0' onclick="connect();">connect</button>
      <span id='status'>NOT CONNECTED</span>
      <input type="text" value="pd" id="name"></input>
      <br>
      <div id="output"></div>
      <textarea id="msg" rows=2></textarea>
      <br>
      <button id='btn1' onclick='chatSend();'>send</button>
      <button id='btn2' onclick='wsClose();'>disconnect</button>
      <div style="clear: both;">
      </div>
    </div>
    <div id="canvasarea" class="area general">
      <!-- <canvas id="canvas_id" width="400" height="300"></canvas> -->
      <canvas id="canvas_id"></canvas>
      <br>
      <button id='erase_btn'>erase</button>
      <button id='black_btn'>black</button>
      <button id='blue_btn'>blue</button>
      <button id='green_btn'>green</button>
      <!--
      <button id='btn7' onclick="clearCanvas();">clear</button>
      -->
    </div>
    <div style="clear: both;">
    </div>
  </div>
</html>
